import React, { useEffect, useState } from 'react'
import { SideBar, Tabs, Image } from 'antd-mobile'
import request from '../../../api/request'
import styles from './bingzheng.module.css'
import Navbar from '../../../compounts/navber/Navbar'
import { useSearchParams } from 'react-router-dom'

function Index() {
    const [sp] = useSearchParams()
    // 状态管理
    const [activeTab, setActiveTab] = useState('diseases') // 当前激活的标签页
    const [sidebarData, setSidebarData] = useState([]) // 侧边栏数据
    const [activeKey, setActiveKey] = useState('') // 当前选中的侧边栏项ID
    const [contentData, setContentData] = useState([]) // 右侧内容数据
    const [loading, setLoading] = useState(false) // 加载状态
    const [page, setPage] = useState(1) // 当前页码
    const [hasMore, setHasMore] = useState(true) // 是否有更多数据
    const [totalCount, setTotalCount] = useState(0) // 总数据量

    // 每页显示数量
    const pageSize = 100;

    // 获取科室数据
    const fetchDepartments = () => {
        setLoading(true)
        request.get('/share/knowledgeBase/v1/findDepartment').then(res => {
            setLoading(false)
            if (res.data && res.data.result) {
                setSidebarData(res.data.result)
                // 设置默认选中第一个科室
                if (res.data.result.length > 0) {
                    // setActiveKey(res.data.result[0].id.toString())
                    setActiveKey(sp.get('id'))
                }
            }
        }).catch(error => {
            setLoading(false)
            console.error('获取科室数据失败:', error)
        })
    }

    // 获取药品分类数据
    const fetchDrugCategories = () => {
        setLoading(true)
        // 使用用户提供的药品分类接口
        request.get('/share/knowledgeBase/v1/findDrugsCategoryList').then(res => {
            setLoading(false)
            if (res.data && res.data.result) {
                setSidebarData(res.data.result)
                // 设置默认选中第一个药品分类
                if (res.data.result.length > 0) {
                    setActiveKey(res.data.result[0].id.toString())
                }
            }
        }).catch(error => {
            setLoading(false)
            console.error('获取药品分类数据失败:', error)
        })
    }

    // 获取右侧内容数据
    const fetchContentData = () => {
        if (!activeKey) return

        setLoading(true)
        if (activeTab === 'diseases') {
            // 病症数据获取
            request.get('/share/knowledgeBase/v1/findDiseaseCategory', {
                params: {
                    departmentId: activeKey
                }
            }).then((res) => {
                setLoading(false)
                if (res.data && res.data.result) {
                    setContentData(res.data.result)
                    setTotalCount(res.data.result.length)
                }
            }).catch(error => {
                setLoading(false)
                console.error('获取病症数据失败:', error)
            })
        } else {
            // 药品数据获取 - 使用用户提供的接口
            request.get('/share/knowledgeBase/v1/findDrugsKnowledgeList', {
                params: {
                    drugsCategoryId: activeKey,
                    page: page,
                    count: pageSize
                }
            }).then((res) => {
                console.log(res);
                
                setLoading(false)
                if (res.data && res.data.result) {
                    // 如果是第一页，则替换数据；否则追加数据
                    if (page === 1) {
                        setContentData(res.data.result)
                    } else {
                        setContentData(prevData => [...prevData, ...res.data.result])
                    }
                    // 假设接口返回总数量，这里需要根据实际情况调整
                    setTotalCount(res.data.total || 0)
                    // 判断是否还有更多数据
                    setHasMore(res.data.result.length === pageSize && contentData.length + res.data.result.length < res.data.total)
                } else {
                    setHasMore(false)
                }
            }).catch(error => {
                setLoading(false)
                console.error('获取药品数据失败:', error)
            })
        }
    }

    // 处理标签页切换
    const handleTabChange = (tabKey) => {
        setActiveTab(tabKey)
        setPage(1) // 重置页码
        // 切换标签页时，更新侧边栏数据
        if (tabKey === 'diseases') {
            fetchDepartments()
        } else {
            fetchDrugCategories()
        }
    }

    // 加载更多数据
    const loadMore = () => {
        if (!hasMore || loading) return
        setPage(prevPage => prevPage + 1)
    }

    // 初始化加载科室数据
    useEffect(() => {
        fetchDepartments()
    }, [])

    // 当activeKey或activeTab变化时，重置页码并更新右侧内容
    useEffect(() => {
        setPage(1)
        fetchContentData()
    }, [activeKey, activeTab])

    // 当页码变化时，加载更多数据
    useEffect(() => {
        if (page > 1) {
            fetchContentData()
        }
    }, [page])

    return (
        <div className={styles.box} style={{ height: '100vh', display: 'flex', flexDirection: 'column' }}>
            <Navbar></Navbar>

            <div className={styles.tabsContainer}>
                <Tabs
                    activeKey={activeTab}
                    onChange={handleTabChange}
                    className={styles.tabs}
                >
                    <Tabs.Tab key="diseases" title="常见病症" />
                    <Tabs.Tab key="medicines" title="常见药品" />
                </Tabs>
            </div>

            <div style={{ flex: 1, display: 'flex', overflow: 'hidden' }}>
                {/* 左侧导航 */}
                <div style={{ width: '30%', background: '#f5f5f5', overflowY: 'auto' }}>
                    {loading && sidebarData.length === 0 ? (
                        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100px' }}>
                            <div className={styles.spinner}></div>
                        </div>
                    ) : (
                        <SideBar style={{'--height':'100%'}} activeKey={activeKey} onChange={setActiveKey}>
                            {sidebarData.map(item => (
                                <SideBar.Item 
                                    key={item.id.toString()}
                                    title={activeTab === 'diseases' ? item.departmentName : item.name}
                                />
                            ))}
                        </SideBar>
                    )}
                </div>

                {/* 右侧内容区域 */}
                <div className={styles.rightbox} style={{ width: '70%', padding: '12px', overflowY: 'auto' }}>
                    {loading && contentData.length === 0 ? (
                        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '200px' }}>
                            <div className={styles.spinner}></div>
                            <span style={{ marginLeft: '8px' }}>加载中...</span>
                        </div>
                    ) : contentData.length > 0 ? (
                        <div>
                            <div className={styles.contentGrid}>
                                {contentData.map((item, index) => (
                                        <div className={styles.itemTitle} key={index}>
                                            <Image style={{display:item.picture? 'block':'none'}} src={item.picture} width={100} height={100} fit='cover' />
                                            {item.name}
                                        </div>
                                ))}
                            </div>
                        </div>
                    ) : (
                        <div className={styles.emptyState}>暂无数据</div>
                    )}
                </div>
            </div>
        </div>
    )
}

export default Index
